<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
            margin: 0;
            /*body有8像素的外边距*/
        }
        header{
            width: 100%;
            height: 60px;
            background-color: rosybrown;
            position: fixed;
            top: 0;
            /*left: 100px;*/
        }
        main{
            /*margin-top: 60px;*/
            height: 800px;
            background-color: skyblue;
        }
        footer{
            /*margin-bottom: 60px;*/
            height: 60px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <header>这是头部</header>
    <main>这是正文部分</main>
    <footer>这是底部</footer>
</body>
</html>
<!--
    定位 position
    固定定位 fixed 
        参照点是html文档，且参照点不可以更改

    相对定位 relative
        参照点是本身，脱离文档流以后原来位置保留
        一般用于元素微调位置
        提供参照点


    绝对定位 absolute
        参照点是html文档，原来的位置不保留
        参照点是可以更改的
        如果它的上级元素中有相对相对定位的元素
        那他的参照点就会变成那个上级元素
-->
<!--只要是定位，都会脱离普通的文档流
    定位以后需要用top/bottom、left/right来说明定位大哪个位置
    top/bottom、left/right只能和定位结合使用
    top=0 left=0 就是基点位置
-->